<script setup lang="ts">
import { ref } from "@vue/runtime-core"
import { useStoriesStore } from '@/store'

const store = useStoriesStore()
const { newCar } = store
const list = ref(["全部", "已支付", "待发货", "待收货", "待评价"])
const tab = ref(0)

const tabchange = (i: number) => {
    tab.value = i
}

</script>

<template>
    <div>
        <div class="top-bar">
            <div class="bark" @click="$router.push({ path: '/my' })">
                <van-icon name="arrow-left" />
            </div>
            <div class="all">所有订单</div>
        </div>

        <ul class="nav">
            <li v-for="(item, index) in list" :key="index" @click="tabchange(index)">
                <span :class="{ active: index === tab }">{{ item }}</span>
            </li>
        </ul>

        <div class="list-item" v-show="tab == 1 || tab == 0">
            <!-- <div class="pending-payment">
                <div class="payment" style="font-weight: bold; margin: 10px 0;">待付款</div>
            </div> -->
            <ul class="goods-list">
                <li class="list" v-for="(c, i) in newCar" :key="i">
                    <div class="show-goods">
                        <div class="goods">
                            <div class="left-img">
                                <img :src="c.img">
                            </div>
                            <div class="right">
                                <div class="right-box">
                                    <div class="title">{{ c.title }}</div>
                                    <div class="sizess">颜色: <span style="color: #f46;">{{ c.seletedcolor }}</span> 尺码:
                                        <span style="color: #f46;">{{ c.chima }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="price-box">
                                <div style="color: #f46;">¥{{ c.jiage }}</div>
                                <div style="color: #666; font-size: 12px;">X{{ c.num }}</div>
                            </div> -->
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.top-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 45px;
    background-color: #fff;
    align-items: center;

    .bark {
        margin-left: 10px;
    }

    .all {
        margin: 0 auto;
    }
}

.nav {
    display: flex;
    justify-content: space-around;
    padding-top: 50px;

    li {
        span {
            &.active {
                color: red;
            }
        }

    }
}

.list-item {
    margin-left: 5px;
}


.shop {
    display: flex;
    align-items: center;
}

.show-goods {
    margin-top: 10px;

    .goods {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 10px;

        .left-img {
            width: 92px;
            height: 92px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            flex: 1;

            .right-box {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 5px;
                width: 200px;
                height: 100%;

                .title {
                    margin-bottom: 25px;
                    font-weight: bold;
                    font-size: 14px;
                }

                .sizess {
                    font-size: 12px;
                }
            }
        }
    }
}
</style>